<template>
  <div class="health-container">
    <!-- 健康数据表单 -->
    <el-card class="health-card">
      <el-form
        ref="healthFormRef"
        :model="healthData"
        :rules="healthRules"
        label-width="120px"
        class="health-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="体重(kg)" prop="weight">
              <el-input-number
                v-model="healthData.weight"
                :min="20"
                :max="200"
                placeholder="请输入今日体重"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="今日心情" prop="mood">
              <el-select v-model="healthData.mood" placeholder="请选择今日心情" style="width: 100%">
                <el-option label="极差" :value="1" />
                <el-option label="差" :value="2" />
                <el-option label="一般" :value="3" />
                <el-option label="好" :value="4" />
                <el-option label="极好" :value="5" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="昨日入睡时间" prop="sleepStartTime">
              <el-time-picker
                v-model="healthData.sleepStartTime"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="选择入睡时间"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="今日起床时间" prop="sleepEndTime">
              <el-time-picker
                v-model="healthData.sleepEndTime"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="选择起床时间"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="健身目标" prop="goal">
          <el-select v-model="healthData.goal" placeholder="请选择健身目标" style="width: 100%">
            <el-option label="减重" value="减重" />
            <el-option label="增重" value="增重" />
            <el-option label="保持体重" value="保持体重" />
            <el-option label="增强体质" value="增强体质" />
            <el-option label="改善睡眠" value="改善睡眠" />
            <el-option label="缓解压力" value="缓解压力" />
          </el-select>
        </el-form-item>
        
        
        <el-form-item>
          <div style="text-align: center;">
            <el-button
              type="primary"
              @click="submitHealthData"
              :loading="isReceiving"
              size="large"
              style="width: 200px" 
            >
              {{ isReceiving ? '正在生成...' : '生成今日规划' }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 健康数据图表 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="24">
        <el-card class="health-card">
          <div class="card-header">
            <h3>健康数据趋势</h3>
            <div class="header-actions">
              <el-radio-group v-model="chartPeriod" @change="loadChartData">
                <el-radio-button label="week">最近一周</el-radio-button>
                <el-radio-button label="month">最近一月</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="chart-container" ref="chartContainer"></div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- AI回复弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="AI健康建议"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="!isReceiving"
    >
      <div class="response-container">
        <el-skeleton :rows="5" animated v-if="isReceiving && fullResponse.length === 0" />
        <div v-else class="response-text" v-html="formattedResponse"></div>
        <div v-if="isReceiving" class="typing-indicator">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false" :disabled="isReceiving">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref, computed, nextTick } from "vue";
import { ElMessage } from "element-plus";
import DashScopeStreamClient from "@/utils/dashscope.js";
import { useUserStore } from "@/store/user";
import { useHealthStore } from "@/store/health";
import dayjs from "dayjs";
import * as echarts from "echarts";

// 获取用户和健康数据store
const userStore = useUserStore();
const healthStore = useHealthStore();
const healthFormRef = ref();

// 图表相关变量
const chartContainer = ref();
const chartInstance = ref(null);
const chartPeriod = ref("week");

// 用于存储完整响应的响应式变量
const fullResponse = ref("");
const isReceiving = ref(false);

// 弹窗相关变量
const dialogVisible = ref(false);

// 格式化响应文本，支持换行和Markdown基本格式
const formattedResponse = computed(() => {
  if (!fullResponse.value) return "";
  
  // 简单的Markdown格式转换
  let formatted = fullResponse.value
    // 将换行符转换为HTML换行
    .replace(/\n/g, '<br>')
    // 将**粗体**转换为HTML粗体
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    // 将*斜体*转换为HTML斜体
    .replace(/\*(.*?)\*/g, '<em>$1</em>');
  
  return formatted;
});

// 健康数据表单
const healthData = ref({
  age: null,
  gender: "",
  height: null,
  weight: null,
  mood: null,
  sleepStartTime: "",
  sleepEndTime: "",
  goal: "",
});

// 表单验证规则
const healthRules = {
  question: [{ required: true, message: "请输入您想咨询的健康问题", trigger: "blur" }],
};

// 计算用户年龄
const userAge = computed(() => {
  if (!userStore.birthDate) return null;
  return dayjs().diff(dayjs(userStore.birthDate), "year");
});

// 计算睡眠时长（小时）
const sleepDuration = computed(() => {
  if (!healthData.value.sleepStartTime || !healthData.value.sleepEndTime) return 0;

  const startTime = dayjs(healthData.value.sleepStartTime, "HH:mm");
  let endTime = dayjs(healthData.value.sleepEndTime, "HH:mm");

  // 如果起床时间早于入睡时间，说明跨天了
  if (endTime.isBefore(startTime)) {
    endTime = endTime.add(1, "day");
  }

  return endTime.diff(startTime, "hour", true).toFixed(1);
});

// 获取心情描述
const moodDescription = computed(() => {
  const moodMap = {
    1: "极差",
    2: "差",
    3: "一般",
    4: "好",
    5: "极好",
  };
  return moodMap[healthData.value.mood] || "";
});

// 加载图表数据
const loadChartData = async () => {
  try {
    let startDate, endDate;

    if (chartPeriod.value === "week") {
      startDate = dayjs().subtract(7, "day").format("YYYY-MM-DD");
      endDate = dayjs().format("YYYY-MM-DD");
    } else {
      startDate = dayjs().subtract(30, "day").format("YYYY-MM-DD");
      endDate = dayjs().format("YYYY-MM-DD");
    }

    const response = await healthStore.getRecordsByDateRange(startDate, endDate);
    const records = response || [];

    // 按日期分组统计
    const dateMap = {};
    records.forEach((record) => {
      const recordDate = record.recordDate;
      if (!dateMap[recordDate]) {
        dateMap[recordDate] = {
          weight: null,
          sleepDuration: null,
          mood: null,
        };
      }

      // 记录体重
      if (record.weight) {
        dateMap[recordDate].weight = record.weight;
      }

      // 计算睡眠时长（如果数据库中没有直接存储sleepDuration）
      if (record.sleepTime && record.wakeUpTime) {
        const startTime = dayjs(record.sleepTime, "HH:mm");
        let endTime = dayjs(record.wakeUpTime, "HH:mm");

        // 如果起床时间早于入睡时间，说明跨天了
        if (endTime.isBefore(startTime)) {
          endTime = endTime.add(1, "day");
        }

        dateMap[recordDate].sleepDuration = endTime
          .diff(startTime, "hour", true)
          .toFixed(1);
      }

      // 如果数据库中直接存储了睡眠时长，优先使用
      if (record.sleepDuration) {
        dateMap[recordDate].sleepDuration = record.sleepDuration;
      }

      // 记录心情
      if (record.mood) {
        dateMap[recordDate].mood = record.mood;
      }
    });

    // 准备图表数据
    const dates = [];
    const weightData = [];
    const sleepData = [];
    const moodData = [];

    // 填充所有日期（包括没有数据的日期）
    const start = dayjs(startDate);
    const end = dayjs(endDate);
    let current = start;

    while (current.isBefore(end) || current.isSame(end)) {
      const dateStr = current.format("YYYY-MM-DD");
      dates.push(current.format("MM-DD"));

      if (dateMap[dateStr]) {
        weightData.push(dateMap[dateStr].weight);
        sleepData.push(dateMap[dateStr].sleepDuration);
        moodData.push(dateMap[dateStr].mood);
      } else {
        weightData.push(null);
        sleepData.push(null);
        moodData.push(null);
      }

      current = current.add(1, "day");
    }

    // 渲染图表
    renderChart(dates, weightData, sleepData, moodData);
  } catch (error) {
    console.error("加载图表数据失败", error);
  }
};

// 渲染图表
const renderChart = (dates, weightData, sleepData, moodData) => {
  if (!chartContainer.value) return;

  nextTick(() => {
    if (chartInstance.value) {
      chartInstance.value.dispose();
    }

    chartInstance.value = echarts.init(chartContainer.value);

    const option = {
      title: {
        text: "健康数据趋势",
        left: "center",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        formatter: function (params) {
          let result = params[0].name + "<br/>";
          params.forEach((param) => {
            if (param.value !== null && param.value !== undefined) {
              result += param.marker + param.seriesName + ": " + param.value + "<br/>";
            }
          });
          return result;
        },
      },
      legend: {
        data: ["体重(kg)", "睡眠时长(小时)", "心情指数"],
        top: 30,
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: dates,
        axisLabel: {
          rotate: 45,
        },
      },
      yAxis: [
        {
          type: "value",
          name: "体重(kg)",
          position: "left",
          min: function (value) {
            return value.min - 5;
          },
          max: function (value) {
            return value.max + 5;
          },
        },
        {
          type: "value",
          name: "睡眠时长(小时)",
          position: "right",
          min: 0,
          max: 12,
        },
        {
          type: "value",
          name: "心情指数",
          position: "right",
          min: 0,
          max: 6,
          show: false,
        },
      ],
      series: [
        {
          name: "体重(kg)",
          type: "bar",
          yAxisIndex: 0,
          data: weightData,
          itemStyle: {
            color: "#5470c6",
          },
        },
        {
          name: "睡眠时长(小时)",
          type: "bar",
          yAxisIndex: 1,
          data: sleepData,
          itemStyle: {
            color: "#91cc75",
          },
        },
        {
          name: "心情指数",
          type: "bar",
          yAxisIndex: 2,
          data: moodData,
          itemStyle: {
            color: "#fac858",
          },
        },
      ],
    };

    chartInstance.value.setOption(option);

    // 响应式调整
    window.addEventListener("resize", () => {
      chartInstance.value.resize();
    });
  });
};

// 初始化表单数据
const initFormData = async () => {
  try {
    // 如果用户已登录，获取最新用户信息
    if (userStore.isLoggedIn) {
      await userStore.getUserInfo();
    }

    // 获取最近的健康记录
    if (userStore.isLoggedIn) {
      try {
        await healthStore.getRecentRecords(1);
        if (healthStore.currentRecord) {
          // 从健康记录中获取数据
          healthData.value = {
            age: userAge.value || healthStore.currentRecord.age || null,
            gender: userStore.gender === 1 ? "男" : userStore.gender === 2 ? "女" : "",
            height: userStore.height || healthStore.currentRecord.height || null,
            weight: healthStore.currentRecord.weight || null,
            mood: healthStore.currentRecord.mood || null,
            sleepStartTime: healthStore.currentRecord.sleepTime || "", // 修改为正确的字段名
            sleepEndTime: healthStore.currentRecord.wakeUpTime || "", // 修改为正确的字段名
            goal: userStore.healthGoal || healthStore.currentRecord.goal || "",
            question: "",
          };
        } else {
          // 从用户信息中获取数据
          healthData.value = {
            age: userAge.value || null,
            gender: userStore.gender === 1 ? "男" : userStore.gender === 2 ? "女" : "",
            height: userStore.height || null,
            weight: null,
            mood: null,
            sleepStartTime: "",
            sleepEndTime: "",
            goal: userStore.healthGoal || "",
            question: "",
          };
        }
      } catch (error) {
        console.error("获取健康记录失败，使用用户基本信息", error);
        // 从用户信息中获取数据
        healthData.value = {
          age: userAge.value || null,
          gender: userStore.gender === 1 ? "男" : userStore.gender === 2 ? "女" : "",
          height: userStore.height || null,
          weight: null,
          mood: null,
          sleepStartTime: "",
          sleepEndTime: "",
          goal: userStore.healthGoal || "",
          question: "",
        };
      }
    }
  } catch (error) {
    console.error("初始化表单数据失败", error);
  }
};

async function submitHealthData() {
  // 表单验证
  if (!healthFormRef.value) return;

  await healthFormRef.value.validate(async (valid) => {
    if (!valid) return;

    // 初始化客户端
    const client = new DashScopeStreamClient(
      "sk-dd83a9bc21f5440491fe836b7aa33cee", // 替换为您的API Key
      "52fd4e7b965e459fa0270e8043a5b110" // 替换为您的应用ID
    );

    // 构建健康信息字符串
    let healthInfo = "我的健康信息：";

    if (healthData.value.age) {
      healthInfo += `年龄${healthData.value.age}岁，`;
    }

    if (healthData.value.gender) {
      healthInfo += `性别${healthData.value.gender}，`;
    }

    if (healthData.value.height) {
      healthInfo += `身高${healthData.value.height}厘米，`;
    }

    if (healthData.value.weight) {
      healthInfo += `体重${healthData.value.weight}公斤，`;
    }

    if (healthData.value.mood) {
      healthInfo += `今日心情${moodDescription.value}，`;
    }

    if (healthData.value.sleepStartTime && healthData.value.sleepEndTime) {
      healthInfo += `昨日${healthData.value.sleepStartTime}入睡，今日${healthData.value.sleepEndTime}起床，睡眠时长约${sleepDuration.value}小时，`;
    }

    if (healthData.value.goal) {
      healthInfo += `健身目标是${healthData.value.goal}，`;
    }

    healthInfo += `我想咨询的问题是：帮我制定一个计划`;

    // 重置响应
    fullResponse.value = "";
    isReceiving.value = true;
    
    // 显示弹窗
    dialogVisible.value = true;

    try {
      // 使用流式回调方式调用
      await new Promise((resolve, reject) => {
        client.streamCall(
          healthInfo,
          { incremental_output: true }, // 启用增量输出
          // 接收到消息时的回调
          (text, data) => {
            console.log("接收到片段:", text);
            console.log("数据详情:", JSON.stringify(data, null, 2));
            // 累积接收到的文本
            fullResponse.value += text;
            
            // 确保UI能够实时更新
            nextTick(() => {
              // 如果有滚动条，自动滚动到底部
              const responseContainer = document.querySelector('.response-container');
              if (responseContainer) {
                responseContainer.scrollTop = responseContainer.scrollHeight;
              }
            });
          },
          // 完成时的回调
          (fullText, metadata) => {
            console.log("完整回复:", fullText);
            console.log("元数据:", metadata);
            isReceiving.value = false;
            ElMessage.success("获取AI建议成功");

            // 保存健康记录
            const saveHealthRecord = async () => {
              try {
                const recordData = {
                  recordDate: dayjs().format("YYYY-MM-DD"),
                  weight: healthData.value.weight,
                  mood: healthData.value.mood,
                  sleepTime: healthData.value.sleepStartTime, // 修改为正确的字段名
                  wakeUpTime: healthData.value.sleepEndTime, // 修改为正确的字段名
                  sleepDuration: sleepDuration.value, // 添加睡眠时长字段
                  goal: healthData.value.goal,
                  age: healthData.value.age,
                  gender: healthData.value.gender,
                  height: healthData.value.height,
                  bmi: healthData.value.weight ? (healthData.value.weight / (healthData.value.height / 100) ** 2).toFixed(2) : null,
                  suggest: fullResponse.value, // 添加AI回复内容
                };
            
                await healthStore.saveRecord(recordData);
            
                // 刷新图表数据
                loadChartData();
              } catch (error) {
                console.error("保存健康记录失败", error);
              }
            };
            
            // 执行保存健康记录
            saveHealthRecord();
            resolve();
          },
          // 错误时的回调
          (error) => {
            console.error("调用出错:", error);
            isReceiving.value = false;
            ElMessage.error("获取AI建议失败，请重试");
            reject(error);
          }
        );
      });
    } catch (error) {
      console.error("流式调用出错:", error);
      isReceiving.value = false;
      ElMessage.error("获取AI建议失败，请重试");
    }
  });
}

onMounted(() => {
  initFormData();
  loadChartData();
});
</script>

<style scoped>
.health-page {
  padding: 20px;
  background: var(--gradient-bg);
  min-height: calc(100vh - 80px);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding: 15px 20px;
  background: var(--gradient-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
}

.page-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 700;
  position: relative;
  padding-bottom: 10px;
}

.page-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: var(--radius-sm);
}

.health-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.data-form {
  background: var(--gradient-card);
  border-radius: var(--radius-lg);
  padding: 25px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
  transition: var(--transition-normal);
}

.data-form:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-light);
}

.form-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.form-header h3 .el-icon {
  margin-right: 10px;
  color: var(--primary-color);
}

.data-chart {
  background: var(--gradient-card);
  border-radius: var(--radius-lg);
  padding: 25px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
  transition: var(--transition-normal);
}

.data-chart:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-light);
}

.chart-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.chart-header h3 .el-icon {
  margin-right: 10px;
  color: var(--health-color);
}

.chart-container {
  height: 300px;
  position: relative;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 15px;
  border: 1px solid var(--border-light);
}

.chart-container canvas {
  border-radius: var(--radius-sm);
}

/* 表单样式优化 */
.data-form :deep(.el-form-item__label) {
  color: var(--text-secondary);
  font-weight: 500;
}

.data-form :deep(.el-input__inner) {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: var(--transition-normal);
}

.data-form :deep(.el-input__inner:focus) {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
}

.data-form :deep(.el-input__inner:hover) {
  border-color: var(--border-medium);
}

.data-form :deep(.el-select .el-input__inner) {
  cursor: pointer;
}

.data-form :deep(.el-date-editor.el-input__inner) {
  width: 100%;
}

.data-form :deep(.el-button) {
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: var(--transition-normal);
}

.data-form :deep(.el-button--primary) {
  background: var(--gradient-primary);
  border: none;
}

.data-form :deep(.el-button--primary:hover) {
  background: var(--gradient-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.data-form :deep(.el-button--default) {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
}

.data-form :deep(.el-button--default:hover) {
  background: var(--bg-tertiary);
  border-color: var(--border-medium);
  color: var(--primary-color);
}

/* AI回复对话框样式 */
.ai-dialog :deep(.el-dialog) {
  background: var(--gradient-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.ai-dialog :deep(.el-dialog__header) {
  background: var(--gradient-ai);
  padding: 20px;
  border-bottom: 1px solid var(--border-light);
}

.ai-dialog :deep(.el-dialog__title) {
  color: var(--white);
  font-weight: 600;
  font-size: 18px;
}

.ai-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
  color: var(--white);
  font-size: 20px;
}

.ai-dialog :deep(.el-dialog__body) {
  padding: 25px;
  color: var(--text-primary);
}

.ai-response {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 20px;
  line-height: 1.6;
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  max-height: 400px;
  overflow-y: auto;
}

.ai-response :deep(h1),
.ai-response :deep(h2),
.ai-response :deep(h3) {
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: 15px;
  font-weight: 600;
}

.ai-response :deep(p) {
  margin-bottom: 15px;
}

.ai-response :deep(ul),
.ai-response :deep(ol) {
  padding-left: 25px;
  margin-bottom: 15px;
}

.ai-response :deep(li) {
  margin-bottom: 8px;
}

.ai-response :deep(code) {
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: monospace;
  color: var(--primary-color);
}

.ai-response :deep(pre) {
  background: var(--bg-tertiary);
  padding: 15px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  border: 1px solid var(--border-light);
  margin-bottom: 15px;
}

.ai-response :deep(blockquote) {
  border-left: 4px solid var(--ai-color);
  padding-left: 15px;
  margin: 15px 0;
  color: var(--text-secondary);
  font-style: italic;
}

.ai-response :deep(strong) {
  color: var(--text-primary);
  font-weight: 600;
}

.ai-response :deep(a) {
  color: var(--primary-color);
  text-decoration: none;
}

.ai-response :deep(a:hover) {
  text-decoration: underline;
}

/* 滚动条样式 */
.ai-response::-webkit-scrollbar {
  width: 6px;
}

.ai-response::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.ai-response::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: var(--radius-sm);
}

.ai-response::-webkit-scrollbar-thumb:hover {
  background: var(--border-dark);
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .health-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .health-page {
    padding: 15px;
  }
  
  .data-form,
  .data-chart {
    padding: 20px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .chart-container {
    height: 250px;
  }
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}

.empty-state .el-icon {
  font-size: 64px;
  margin-bottom: 15px;
  color: var(--text-disabled);
}

.empty-state p {
  font-size: 16px;
  margin: 0;
}

/* 加载状态样式 */
.loading-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}

.loading-state .el-loading-spinner {
  margin-bottom: 15px;
}

.loading-state p {
  font-size: 16px;
  margin: 0;
}
</style>
